var carousel = document.getElementById("carousel")
var pic = document.getElementById("pic")
var ulis =pic.children;
var leftbtn = document.getElementById("leftbtn")
var rightbtn = document.getElementById("rightbtn")
var sub = document.getElementById("sub")
var olis = sub.children;
var idx = 0;
leftbtn.onclick = function () {
    idx--;
    if (idx < 0) {
        idx = ulis.length -1;
    }
    change();
}
rightbtn.onclick = righthandle;
var timer;
timer = setInterval(righthandle,3000)
carousel.onmouseover = function() {
    clearInterval(timer);
}
carousel.onmouseout = function() {
    timer = setInterval(righthandle,2000)
}
// 调用函数
function change() {
    for (i = 0;i<ulis.length;i++) {
        ulis[i].className = ""
        olis[i].className = ""
    }
    ulis[idx].className = "current";
    olis[idx].className = "current";    
}
function righthandle() {
    idx++;
    if (idx >= ulis.length) {
        idx = 0;
    }
    change();
}
for (i = 0;i <olis.length;i++){
    olis[i].index = i;
    olis[i].onclick = function (){
        idx = this.index;
        change();
    }
}